<!-- <template>
	<view class="order">
		<view class="back">
			<uni-icons type="home-filled" class="home-filled"></uni-icons>
			<view class="find">
				<uni-icons type="search" class="search" size="24"></uni-icons>
				搜索
			</view>
		</view>
		<view class="w">
			<view class="position">
				<view class="position_shop">
					复城国际店
					<uni-icons type="arrowright" size="22"></uni-icons>
				</view>
				<view class="method">
					<text class="active">自取</text>
					<text @click=" takeOut">外卖</text>
				</view>
			</view>
			<view class="dis">
				距离您170m
			</view>
			<view class="plan">
				<view class="plan_left">
					<view class="pri">6单/共8杯</view>
					<text>制作中</text>
				</view>
					<view class="del">
						<uni-icons type="plus" size="20"></uni-icons>
					</view>
			</view>
			<view class="notice">
				<image src="../../static/order/icon1.png"></image>
				单笔买满十杯，送一杯，详情请见订购须知。
			</view>
		</view>
		
		<view class="goods">
			<view class="nav_left">
				<view :class="[v.categoryName==categoryName?'active':'','list']" @click="name(v)" v-for="v in category" :key="v.id" >
					<image :src="v.icon"></image>
					<view>{{v.categoryName}}</view>
				</view>
			</view>
			<scroll-view style="height: 1000rpx;" :scroll-into-view="goodshref" :scroll-y="true">
			<view class="goods_con">
				<view class="sharebill">
					<text>好友一起点。分账无需算</text>
					<view>好友拼单</view>
				</view>
				<image src="../../static/order/1.png" class="logo"></image>
				
					<view class="good_list" id="m7">
						<view class="tit">
							轻松点
						</view>
						<scroll-view class="goods_tip" :enable-flex="true" :scroll-x="true">
							<view class="tip" v-for="v in relaxList" :key="v.id">
								<image :src="v.imgUrl"></image>
								<view>{{v.goodsName}}</view>
								<view class="price">
									<view><text>￥</text>{{v.price}}</view>
									<view class="ope">
										<text class="add" v-if="v.num" @click="reduce(v)">-</text>
										<text class="num" v-if="v.num">{{v.num}}</text>
										<text class="add" @click="add(v)">+</text>
									</view>
								</view>
								<view class="hotBuy" v-if="v.isHot">热卖</view>
							</view>
							
						</scroll-view>
						
						
					</view>
				
				
				
				<view class="PlanBling" v-for="(v,k) in AllList" :key="k" >
					<view class="tit" :id="('m'+v[0].categoryId)">
						{{k}}
					</view>
					<view class="tip" v-for="v in v" :key="v.id">
						<view class="hotBox">
							<image :src="v.imgUrl"></image>
							<view class="hotBuy" v-if="v.isHot">热卖</view>
						</view>
						<view class="con">
							<view class="con_tit">
								{{v.goodsName}}
							</view>
							<view class="con_pro">
								{{v.intro}}
							</view>
							<view class="price">
								<view><text>￥</text>{{v.price}}</view>
								<view class="ope">
									<text class="add" v-if="v.num" @click="reducePlan(v)">-</text>
									<text class="num" v-if="v.num">{{v.num}}</text>
									<text class="add" @click="addPlan(v)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
		
		<view class="shopCart" v-if="allPrice">
		  <view class="allPrice">
		    <view>￥<text>{{allPrice}}.00</text></view>
		  </view>
		  <button id="buy" class="{allPrice?'buyclass':''}">购买</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				ispay:false,
				allPrice:0,
				category:[],
				AllList:{},
				relaxList:[],
				List:{},
				categoryName:'',
				goodshref:''
			}
		},
		methods:{
			// 点击分类加样式
			name(v){
				this.categoryName=v.categoryName;
				this.goodshref=`m${v.id}`;
				this.$forceUpdate()
			},
			// 轻松点加减
			reduce(v){
				v.num--
				this.price()
			},
			add(v){
				v.num++
				this.price()
				console.log()
			},
			// plan bimgj加减
			reducePlan(v){
				v.num--
				this.price()
				this.$forceUpdate()
			},
			addPlan(v){
				v.num++
				this.price()
				this.$forceUpdate()
			},
			// 总额
			price(){
				this.allPrice=0
				// console.log(this.List)
					for(let key in this.List){
					this.List[key].forEach(v=>{
						this.allPrice+=v.num*v.price
					})
				}
			},
			// 外卖按钮
			takeOut(){
				uni.showToast({title:'该门店外卖已歇业',icon:'none'})
			}
		},
		onShow(){
			// 获取再来一单的标题
			// console.log(this.$store.state)
			let num = this.$store.state.type
			if(num==1){
				num=0
				this.$store.commit('reorder',num)
				for(let key in this.List){
					this.List[key].forEach(v=>{
						if(v.goodsName===this.$store.state.tit){
							v.num++
						}
					})
				}
				this.price()
			}
		},
		
		mounted(){
			
			// 获取分类数据
			this.$ajax({
				url:'/category/getList',
				method:'get',
			}).then(res=>{
				console.log(99999,res)
				res.data.data.forEach(v=>{
					v.icon=v.icon.replace(/^\/api/,'http://localhost:7001')
				})
				this.category=res.data.data;
			});
			// 获取商品数据
			this.$ajax({
				url:'/goods/getList',
				method:'get',
			}).then(res=>{
				console.log(888888888,res)
				res.data.data.forEach(v=>{
					
					
					v.imgUrl=v.imgUrl.replace(/^\/api/,'http://localhost:7001')
				})
				
				res.data.data.forEach(v=>{
					v.num=0;
					if(!this.AllList[v.categoryName])this.AllList[v.categoryName]=[]
					this.AllList[v.categoryName].push(v);
				});
				this.List={...this.AllList};
				console.log(121212,this.List)
				this.relaxList=this.AllList['轻松点'];
				delete this.AllList['轻松点']
				console.log(this.List)
			})
		}
	}
</script>

<style lang="less">
	view.order {
		.back {
			display: flex;
			padding: 85rpx 30rpx;
			.home-filled {
				width: 64rpx;
				height: 64rpx;
				border-radius: 40rpx;
				border: 1px solid #a3a3a3;
				line-height: 64rpx;
				text-align: center;
			}
			.find {
				width: 300rpx;
				height: 64rpx;
				background: #f6f6f6;
				border-radius: 32rpx;
				margin: 0 auto;
				line-height: 64rpx;
				text-align: center;
				color: #a3a3a3;
				.search {
					vertical-align: middle;
				}
			}
			
			
		}
		.w {
			padding: 0 30rpx 30rpx;
			border-bottom: 1px solid #eee;
		}
		.position {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.position_shop {
				font-size: 38rpx;
				font-weight: 700;
				uni-icons {
					vertical-align: middle;
					margin-left: 16rpx;
				}
			}
			.method {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 163rpx;
				height: 60rpx;
				border: 1px solid #d7d7d7;
				background-color: #f0f2f1;
				border-radius: 30rpx;
				padding: 2rpx;
				font-size: 22rpx;
				text {
					width: 80rpx;
					height: 57rpx;
					line-height: 57rpx;
					text-align: center;
					border-radius: 30rpx;
					color: #9c9c9c;
					&.active {
						background-color: #007f61;
						color: #fff;
					}
				}
				
			}
		}
		.dis {
			font-size: 23rpx;
			color: #9c9c9c;
		}
		.plan {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.plan_left {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				width: 600rpx;
				height: 40rpx;
				background-color: #f0f2f1;
				border-radius: 20rpx;
				margin: 30rpx 0;
				text {
					color: #9d9d9d;
				}
				.pri {
					width: 150rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					border-top-left-radius: 0;
					padding-left: 20rpx;
					background-color: #cfece7;
					color: #007f61;
					margin-right: 30rpx;
				}
				
			}
			.del {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				transform: rotate(45deg)
			}
		}
		.notice {
			color: #6f6f6f;
			font-size: 24rpx;
			image {
				width: 38rpx;
				height: 32rpx;
				vertical-align: middle;
				margin-right: 14rpx;
			}
		}
		.goods {
			display: flex;
		}
		.nav_left {
			padding-bottom: 300rpx;
			display: inline-block;
			background-color: #f0f1f3;
			.list {
				width: 153rpx;
				text-align: center;
				font-size: 24rpx;
				padding: 50rpx 0 50rpx 0;
				border-radius: 20rpx;
				background-color: #f0f1f3;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				&.active {
					background-color: #fff;
					border-left: 8rpx solid #008766;
					border-right: 8rpx solid #fff;
					border-radius:0;
					box-sizing:border-box
				}
			}
		}
		.goods_con {
			padding: 0 23rpx 0 23rpx;
			.sharebill {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				align-items: center;
				font-size: 24rpx;
				width: 500rpx;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 20rpx;
				margin: 28rpx 0;
				view {
					width: 142rpx;
					height: 60rpx;
					background-color: #007f61;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					border-radius: 30rpx;
				}
			}
			.logo {
				width: 540rpx;
				height: 350rpx;
			}
			.goods_tip {
				display: flex;
				width: 551rpx;
				height: 374rpx;
				margin-bottom: 55rpx;
			}
			.good_list {
				font-size: 26rpx;
				.tit {
					display: inline-block;
					padding: 12rpx 30rpx;
					background-color: #fff6ed;
					color: #b09556;
					margin: 45rpx 0;
					border-radius: 10rpx;
				}
				.tip {
					position: relative;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;;
					font-size: 28rpx;
					font-weight: 700;
					width: 264rpx;
					height: 354rpx;
					border: 1px solid #e7e7e7;
					border-radius: 20rpx;
					text-align: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-right: 14rpx;
					&:last-child {
						margin-right: 0;
					}
					image {
						width: 110rpx;
						height: 178rpx;
						margin: 0 auto;
					}
					.price {
						display: flex;
						justify-content: space-between;
						view text {
							font-size: 20rpx;
						}
						.ope {
							display: flex;
							align-items: center;
							justify-content: center;
							.add {
								width: 40rpx;
								height: 40rpx;
								line-height: 40rpx;
								border-radius: 20rpx;
								background-color: #008462;
								color: #fff;
								text-align: center;
								font-size: 30rpx;
							}
							.num {
								margin: 0 10rpx;
								font-size: 30rpx;
							}
						}
					}
					.hotBuy {
						position: absolute;
						top: 0;
						left: 0rpx;
						width: 70rpx;
						height: 35rpx;
						background-color: #ff6f33;
						color: #fff;
						font-weight: normal;
						border-top-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						font-size: 26rpx;
					}
				}
			}
			.PlanBling {
				font-size: 26rpx;
				width: 550rpx;
				.tit {
					display: inline-block;
					padding: 12rpx 30rpx;
					background-color: #fff6ed;
					color: #b09556;
					margin: 45rpx 0;
					border-radius: 10rpx;
				}
				.tip {
					display: flex;
					height: 160rpx;
					align-items: center;
					margin: 40rpx 0 82rpx 0;
					.hotBox {
						position: relative;
						image {
							flex-shrink: 0;
							width: 164rpx;
							height: 123rpx;
						}
					}
					.hotBuy {
						position: absolute;
						top: -17rpx;
						left: 0rpx;
						width: 70rpx;
						height: 35rpx;
						text-align: center;
						background-color: #ff6f33;
						color: #fff;
						font-weight: normal;
						border-top-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						font-size: 26rpx;
					}
					.con {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding-left: 15rpx;
						color: #acacac;
						
						.con_tit {
							color: #000;
							font-size: 34rpx;
							font-weight: 700;
						}
						.con_pro {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin: 15rpx 0;
						}
					}
					.price {
						display: flex;
						justify-content: space-between;	
						font-weight: 700;
						color: #000;
						view text {
							font-size: 20rpx;
						}
						.ope {
							display: flex;
							align-items: center;
							justify-content: center;
							.add {
								width: 40rpx;
								height: 40rpx;
								line-height: 40rpx;
								border-radius: 20rpx;
								background-color: #008462;
								color: #fff;
								text-align: center;
								font-size: 30rpx;
							}
							.num {
								margin: 0 10rpx;
								font-size: 30rpx;
							}
						}
					}
				}
			}
			
		}
		.shopCart {
		  position: fixed;
		  bottom: 0;
		  right: 0;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 0 30rpx;
		  width: 100%;
		  height: 135rpx;
		  background-color: #fff;
		  border-top: 1px solid #eee;
		  border-bottom: 1px solid #eee;
		  box-sizing: border-box;
		}
		.shopCart .allPrice {
		  font-size: 24rpx;
		  color: #444;
		}
		.shopCart .allPrice view {
		  display: flex;  
		  color: #000;
		  font-weight: 700;
		  margin-top: 10rpx;
		}
		.shopCart .allPrice view text {
		  font-size: 40rpx;
		}
		#buy {
		  margin: 0;
		  width: 228rpx;
		  height: 80rpx;
		  font-size: 38rpx;
		  line-height: 40rpx;
		  font-weight: normal;
		  color: #666;
		}
		button.buyclass {
			display: flex;
			align-items: center;
			justify-content: center;
		    background-color: #008766;
		    color: #fff!important
		}
	
		
	}
</style>
 -->
 
<!-- <template>
 	<view class="history">
 		<view class="con2" v-for="v in goodsList" :key="v.tit">
 				<view class="shoptit">
 					<view class="store">{{v.src}}</view>
 					<view class="pay">{{v.state}}</view>
 				</view>
 				<view class="time">
 					{{v.time}}
 				</view>
 				<view class="invite">
 					{{v.type}}
 				</view>
 				<view class="good_list">
 					
 					<view class="goods_con">
 						<view class="content2">
 							<image :src="v.imgUrl"></image>
 							<view class="tit">
 								<view>
 									{{v.tit}}
 								</view>
 								<view>{{v.con}}</view>
 							</view>
 						</view>
 						<view class="pri_num">
 							<view class="pri">
 								￥{{v.pri}}.00
 							</view>
 							<view class="num">
 								共 {{v.num}} 件
 							</view>
 						</view>
 					</view>
 					<view @click="anotherList(v.tit)" style="display: flex;justify-content: flex-end;">
 						<view class="Anotherlist">
 							再来一单
 						</view>
 					</view>
 				</view>
 		</view>
 		
 		
 	</view>
 </template>
 
 <script>
 	export default {
 		data(){
 			return {
 				goodsList:[
 					{
 						src:'府城国际店',
 						time:'2021-07-25 12:07:25',
 						state:'待付款',
 						type:'自取',
 						imgUrl:'../../static/takrfood/3.png',
 						tit:'红茶拿铁',
 						con:'中杯/正常冰',
 						pri:18,
 						num:1
 				
 				}]
 			}
 		},
 		methods:{
 			anotherList(tit){
 				let num=1
 				this.$store.commit('order',{tit,num})
 				uni.switchTab({
 					url:`../order/order?tit=${tit}`
 				})
 			}
 		}
 	}
 </script>
 
 <style lang="less">
 	.history {
 		font-size: 26rpx;
 		background-color: #f5f5f5;
 		height: 975rpx;
 		padding: 60rpx 30rpx 195rpx 30rpx;	
 	}
 	.con2 {
 		width: 692rpx;
 		height: 455rpx;
 		background-color: #fff;
 		padding: 40rpx;
 		box-sizing: border-box;
 		border-radius: 20rpx;
 		.shoptit {
 			display: flex;
 			justify-content: space-between;
 			.store {
 				font-size: 30rpx;
 				
 			}
 			.pay {
 				color: #818181;
 			}
 			
 		}
 		.time {
 			color: #818181;
 			margin: 13rpx 0 20rpx 0;
 		}
 		.invite {
 			width: 70rpx;
 			height: 40rpx;
 			border: 1px solid #b29451;
 			line-height: 40rpx;
 			text-align: center;
 			color: #b29451;
 		}
 		.good_list {
 			.goods_con {
 				display: flex;
 				justify-content: space-between;
 				padding: 34rpx 0;
 				border-bottom: 1px solid #ebebeb;
 				.content2 {
 					display: flex;
 					image {
 						width: 88rpx;
 						height: 88rpx;
 					}	
 					.tit {
 						margin-left: 35rpx;
 						display: flex;
 						flex-direction: column;
 						justify-content: space-between;
 						& :first-child {
 							font-size: 30rpx;
 							}
 						& :last-child {
 							color: #818181;
 							}	
 					}
 				}
 				.pri_num {
 					display: flex;
 					flex-direction: column;
 					justify-content: space-between;
 					.pri {
 						font-size: 30rpx;
 					}
 					.num {
 						color: #818181;
 					}
 				}
 				
 				
 			}
 			
 		}
 		.Anotherlist {
 			width: 152rpx;
 			height: 56rpx;
 			border: 1px solid #007d5f;
 			color: #007d5f;
 			border-radius: 10rpx;
 			margin-top: 27rpx;
 			text-align: center;
 			line-height: 56rpx;
 		}
 		
 	} -->
 	
 </style>
 